<template>
    <div class="submit-form-container">
        <div class="title-wrapper">
            <p class="icon"></p>
            <p class="title">
                通话未成功！请留下您的问题，以便我们工程师联系您
            </p>
        </div>
        <van-form class="form" @submit="onSubmit">
            <van-field
                v-model.trim="username"
                name="姓名"
                label="姓名"
                placeholder="请输入您的姓名"
                :error="false"
                :rules="[{ required: true, message: '请输入您的姓名' }]"
                label-width="60px"
                class="name"
            />
            <p class="divider"></p>
            <van-field
                v-model.trim="phone"
                type="phone"
                name="手机号"
                label="手机号"
                placeholder="请输入您的手机号"
                :error="false"
                :rules="[
                    {
                        required: true,
                        message: '请输入您的手机号',
                    },
                ]"
                label-width="60px"
                class="phone"
                pattern="^1[3456789]\d{9}$"
                oninput="value=value.replace(/[^\d]/g,'').replace(/\b(\w{3})\w+(\w{4})\b/g, '$1****$2')"
                readonly
            />
            <p class="divider"></p>
            <van-field
                v-model.trim="message"
                rows="4"
                type="textarea"
                label="问题描述"
                maxlength="200"
                placeholder="请简单描述您的问题；如现在不方便接听电话，请留下方便的联系时间。如需要我们联系其他手机号码，也请在此处留下新的联系方式，谢谢"
                class="textarea"
                label-width="60px"
            />
            <p class="divider"></p>
            <div class="button-wrapper">
                <van-button class="button submit" native-type="submit">
                    提交
                </van-button>
                <van-button
                    class="button cancel"
                    @click="close"
                    native-type="button"
                >
                    取消
                </van-button>
            </div>
        </van-form>
        <p class="logo"></p>
        <SubmitSuccess :show="showSubmitSuccess" @close="close" />
        <SystemError
            :show="showSystemError"
            @close="
                () => {
                    showSystemError = false;
                }
            "
        />
        <van-loading v-if="showLoading" size="48px" vertical class="loading">
            提交中
        </van-loading>
    </div>
</template>

<script>
import { mapState } from "vuex";
import Vue from "vue";
import { Field, Button, Dialog, Form, Loading } from "vant";
Vue.use(Field);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Form);
Vue.use(Loading);
import SubmitSuccess from "./SubmitSuccess.vue";
import { submitQuestion, sendMoblieMessage } from "../../api/api";
import SystemError from "../error/SystemError.vue";
export default {
    components: { SubmitSuccess, SystemError },
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        ticket: {
            type: Object,
            default: () => {},
        }
    },
    data() {
        return {
            message: "",
            username: "",
            phone: localStorage
                .getItem("phoneNumber")
                .replace(/\b(\w{3})\w+(\w{4})\b/g, "$1****$2"),
            showSubmitSuccess: false,
            showSystemError: false,
            showLoading: false,
        };
    },
    watch: {},
    computed: {
        ...mapState("app", ["ticketId"]),
    },
    created() {},
    mounted() {
    },
    methods: {
        submitQuestion() {
            if (!this.ticketId) {
                Dialog.alert({
                    message: "工单还未创建，请稍后再试",
                }).then(() => {
                    // on close
                });
                return;
            }
            const data = {
                phone: this.phone,
                name: this.username,
                content: this.message,
            };
            this.showLoading = true;
            submitQuestion(this.ticketId, data)
                .then((resp) => {
                    const { code } = resp.data;
                    if (code === "0000") {
                        this.showLoading = false;
                        this.showSubmitSuccess = true;
                    } else {
                        console.warn("submit question error ", resp);
                        this.showLoading = false;
                        this.showSystemError = true;
                    }
                })
                .catch((err) => {
                    console.error("submit question error ", err);
                    this.showLoading = false;
                    this.showSystemError = true;
                });
        },
        close() {
            this.showSubmitSuccess = false;
            this.$emit("close");
        },
        onSubmit() {
            this.sendMoblieMessage();
            this.submitQuestion();
        },
        sendMoblieMessage() {
            const { orderId, model } = this.ticket;
            const username = this.username.substring(0, 8);
            const phone = localStorage.getItem("phoneNumber");
            const message = this.message.substring(0, 50);
            const content = `视频呼入取消：单号：${orderId}，姓名： ${username}，手机号码：${phone}，机型：${model}，问题描述： ${message}，请及时回拨电话处理，谢谢。`;
            // 视频呼入取消：{单号,10}，{姓名,8}，{手机号码,15}, {机型,40}，{问题描述,100}，请及时回拨电话处理，谢谢
            sendMoblieMessage("", content, this.$route.query.id);
        },
    },
};
</script>

<style lang="less" scoped>
.submit-form-container {
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    padding: 25px 16px 20px 16px;

    .title-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 216px;
        // background: linear-gradient(132deg, #eb715a 0%, #efa88f 100%);
        // box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.15),
        //     0px 2px 24px 0px rgba(0, 0, 0, 0.08),
        //     inset 1px 3px 7px 0px rgba(255, 255, 255, 0.21);
        // border-bottom-left-radius: 80% 25%;
        // border-bottom-right-radius: 80% 25%;
        background-image: url("../../assets/img/leave-message-back.png");
        background-size: 100% 216px;
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;

        .icon {
            width: 24px;
            height: 25px;
            background-image: url("../../assets/img/call-failed.png");
            background-size: 24px 25px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            margin-top: 25px;
        }

        .title {
            width: 203px;
            font-size: 14px;
            font-weight: 400;
            color: #ffffff;
            line-height: 20px;
            margin-top: 14px;
            margin-left: calc(50% - 101px);
        }
    }

    .form {
        position: absolute;
        top: 122px;
        left: 16px;
        width: calc(100% - 32px);
        background: #ffffff;
        box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        padding: 24px 20px 20px 20px;
        box-sizing: border-box;
    }

    .divider {
        width: 100%;
        height: 1px;
        background: #eeeeee;
        border-radius: 2px;
    }

    .name {
        padding: 0 0 12px 0;
    }

    .phone {
        padding: 22px 0 12px 0;
    }

    .textarea {
        width: 100%;
        height: 124px;
        font-size: 14px;
        font-weight: 400;
        color: #aeb3b5;
        line-height: 20px;
        box-sizing: border-box;
        padding: 22px 0;
    }

    .button-wrapper {
        margin-top: 28px;

        .button {
            width: 295px;
            max-width: 100%;
            height: 42px;
            border-radius: 21px;
            font-size: 14px;
            font-weight: 400;
            color: #b5b5b5;
            line-height: 20px;
        }
        .submit {
            background: linear-gradient(180deg, #f34651 0%, #d61c22 100%);
            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
            color: #ffffff;
        }
        .cancel {
            background: #ffffff;
            border: 1px solid #e4e4e4;
            color: #b5b5b5;
            margin-top: 20px;
        }
    }
    .logo {
        width: 97px;
        height: 24px;
        background-image: url("../../assets/img/mlogo-red.png");
        background-size: 97px 24px;
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 20px;
        left: calc(50% - 46px);
    }
    .loading {
        top: 40%;
    }
}
</style>
